<template>
	<view class="pages_yellow">
		<!--收入流水  -->
		<view class="userMoneyPage" v-if="type < 4">
			<view class="container">
				<view class="banner-class">
					<view class="l-promo-block-v1-content background_color_1 color_2">
						<view class="ul">
							<view @click="showView" data-id="4" class="li border-none">
								 
								
								<view><text class="cuIcon-redpacket text-white"></text>可提金额</view>
								<view class="inline">
									<text class="num">¥ {{ money }}</text>
									<text class="mgl5">[提现]</text>
								</view>
							</view>
							<!-- <view data-id="3"   class="li">
              <image src='/image/ico38.png'></image>
              <text>待结算</text>
              <text>¥ {{freeze_money}}</text>
            </view> -->
						</view>
					</view>
				</view>
				<view class="tab">
					<view data-listtype="1" @click="setStatus" :class="listType == 1 ? 'tabli on' : 'tabli'"><text>收入记录</text></view>
					<view data-listtype="2" @click="setStatus" :class="listType == 2 ? 'tabli on' : 'tabli'"><text>提现记录</text></view>
				</view>

				<!-- 收入流水 -->
				<view class="money-list money-list-1" v-if="listType == 1">
					<view v-if="nodata == 0">
						<view class="money-one" :key="index" v-for="(item, index) in moneyLog">
							<view class="moneyico"><image :src="item.logo+'?imageView2/2/w/50'"></image></view>
							<view class="moneytext">
								<view class="money-title">
									<view class="pull-left">{{ item.remark }}</view>
									<view class="pull-right">￥{{ item.num }}</view>
									<view class="clear"></view>
								</view>
								<view class="light text-over-hidden">
									<view class="pull-left">{{ item.add_date }}</view>
									<!-- <view class="pull-right">{{ item.commissionNum }}%</view> -->
									<view class="clear"></view>
								</view>
							</view>
						</view>
					</view>
					<view class="nodata" v-else>
						 <view class="errormsgDiv">
							<view class="errormsg">\（￣︶￣）/</view>
							<view class="errormsg2">没有相关数据</view>
						  </view>
					</view>
				</view>
				<!-- 收入流水 -->
				<!-- 提现记录 -->
				<view class="money-list" v-if="listType == 2">
					<view v-if="nodata2 == 0">
						<view class="money-one" :key="index" v-for="(item, index) in withDrawList">
							<view class="moneytext">
								<view class="">
									<text class="pull-left">提现到{{ item.account }}({{ item.name }})</text>
									<text class="pull-right">{{ item.money }}</text>
									<view class="clear"></view>
								</view>
								<view class="light text-over-hidden">{{ item.addtime }}</view>
							</view>
						</view>
					</view>
					<view class="nodata" v-else>
						 <view class="errormsgDiv">
							<view class="errormsg">\（￣︶￣）/</view>
							<view class="errormsg2">暂无提现记录</view>
						  </view>
					</view>
				</view>
				<!-- 提现记录 -->
			</view>
		</view>

		<!--充值  -->
		<view class="userWithDraw" v-if="type == 4">
			 <form @submit="doRecharge">
				<view class="container">
					<view class="withdrawBox">
						<view class="withdrawBox-2 ">
							<view class="withdrawBox-2-title pd10">提现金额（￥{{ money }}）</view>

							<view class="withdrawBox-2-input mgt10">
								<view class="pull-left"></view>
								<input type="text" name="account" :value="account" placeholder="支付宝帐号" class="" />
								<view class="clear"></view>
							</view>

							<view class="withdrawBox-2-input mgt10">
								<view class="pull-left"></view>
								<input type="text" name="name" :value="name" placeholder="真实姓名" class="" />
								<view class="clear"></view>
							</view>

							<view class="mgt10">
								<text class="light pd10">到账时间以支付宝到账为准</text>
								<!-- <text class="blue"> 全部现现</text> -->
							</view>
						</view>
						<view class="withdrawBox-3 pd10">
							
							<button formType="submit"   class="cu-btn  bg-blue margin-tb-sm lg"><text :class="loading==1?'cuIcon-loading2 cuIconfont-spin':'cuIconfont-spin'"></text>提现</button>
			 
							<button class="cu-btn  bg-gray margin-tb-sm lg" style="margin-right: 20upx;"   @click="unDoWithDraw">取消</button>
							<view class="clear"></view>
						</view>
					</view>
				</view>
				</form>
				
				
			 
		</view>
	</view>
</template>

<script>
import beeApp from '../../beeApp.js';

export default {
	data() {
		return {
			type: 3,
			showAddBank: 0,
			withDrawList: [],
			page1: 1,
			account: '',
			nodata: 0,
			nodata2: 0,
			name: '',
			lastpage1: 0,
			user_info: {},
			array: ['招商银行', '北京银行'],
			bankname: '',
			selectBank: {},
			page: 1,
			lastpage: 0,
			loading: 0,
			disabled:0,
			moneyLog: [],
			freeze_money: 0,
			money: 0,
			myBanks: [],
			payList: [],
			listType: 1,
			payListSelect: [],
			payListSelectKey: 0,
			payListSelectText: '请选择'
		};
	},
	onReachBottom() {
		if (this.listType == 1) {
			this.loadmoney();
		} else {
			this.getWithDrawList();
		}
	},
	onPullDownRefresh() {
		this.getInfo();
		this.loadmoney(1);
		uni.stopPullDownRefresh();
	},
	onLoad(option) {
		this.getInfo();
		this.loadmoney();
		var account = uni.getStorageSync('account');
		if (account) {
			this.setData({ account: account });
		}
		var name = uni.getStorageSync('name');
		if (name) {
			this.setData({ name: name });
		}
	},
	onShow: function() {},

	methods: {
		getInfo: function() {
			var that = this;
			beeApp.api(
				'api/user/info',
				{
					fields: 'avatarUrl,user_id,last_update_time,nickname,phone'
				},
				function(res) {
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}

					that.setData({ user_info: res.data });
				}
			);
		},

		//资金流水
		loadmoney: function(reload = 0) {
			var that = this;

			if (reload == 1) {
				this.setData({
					loading: 0,
					page: 1,
					lastpage: 0,
					moneyLog: []
				});
			}

			if (this.loading == 1 || this.lastpage == 1) {
				return;
			}
			var page = this.page;
			this.loading = 1;
			beeApp.api(
				'api/finance/get',
				{
					page: page,
					limit: 10,
					order: 'id desc'
				},
				function(res) {
					that.loading = 0;
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					if (res.data.list.length == 0) {
						that.lastpage = 1;
					}
					that.page++;
					that.setData({
						moneyLog: that.moneyLog.concat(res.data.list),
						freeze_money: res.data.freeze_money,
						money: res.data.money
					});
					var nodata = 0;
					if (that.moneyLog.length == 0) {
						nodata = 1;
					}
					that.setData({ nodata: nodata });
				}
			);
		},
		showView: function(e) {
			this.setViweType(e.currentTarget.dataset.id);
			console.log(e.currentTarget.dataset.id);
		},
		setViweType: function(id) {
			this.setData({ type: id });
		},
		unDoWithDraw: function() {
			this.setViweType(3);
			//setViweType(3)
		},
		getWithDrawList: function(reload = 0) {
			this.setViweType(2);
			this.setData({ listType: 2 });
			var that = this;
			if (reload == 2 && this.withDrawListloaded == 1) {
				return;
			}
			if (reload == 1) {
				this.setData({
					loading: 0,
					page1: 1,
					lastpage1: 0,
					withDrawList: []
				});
			}

			if (this.loading == 1 || this.lastpage1 == 1) {
				return;
			}
			this.withDrawListloaded = 1;
			var page = this.page1;
			this.loading = 1;
			beeApp.api(
				'api/money_withdraw/get',
				{
					page: page,
					limit: 10,
					order: 'id desc'
				},
				function(res) {
					that.loading = 0;
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					if (res.data.list.length == 0) {
						that.lastpage1 = 1;
					}
					that.page1++;
					that.setData({
						withDrawList: that.withDrawList.concat(res.data.list)
					});
					var nodata = 0;
					if (that.withDrawList.length == 0) {
						nodata = 1;
					}
					that.setData({ nodata2: nodata });
				}
			);
		},
		//充值
		doRecharge: function(e) {
			var that = this;
			var postData = e.detail.value;

			if (postData.name == '') {
				beeApp.alert('真实姓名不能为空');
				return;
			}
			if (postData.account == '') {
				beeApp.alert('支付宝帐号不能为空');
				return;
			}

			that.setData({ loading: 1, disabled: 1 });
			that.payloading = 1;
			uni.setStorageSync('name', postData.name);
			uni.setStorageSync('account', postData.account);
			beeApp.api(
				'/api/user/withDraw',
				{
					name: postData.name,
					account: postData.account
				},
				function(res) {
					if (res.code != 200) {
						beeApp.alert(res.msg);
						that.payloading = 0;
						that.setData({ loading: 0, disabled: 0 });
						
						return false;
					}
					that.getWithDrawList(1);
					that.loadmoney(1);
					that.setData({ loading: 0, disabled: 0 });
				}
			);
		},
		bindChange: function(e) {
			this.payListSelectKey = e.detail.value;
			this.setData({ payListSelectText: this.payListSelect[e.detail.value] });
			console.log(e);
		},
		setData: function(data) {
			for (var i in data) {
				this[i] = data[i];
			}
		},

		setStatus: function(e) {
			var listType = e.currentTarget.dataset.listtype;

			this.setData({ listType: listType });
			if (this.listType == 2) {
				this.getWithDrawList(2);
			}
			//console.log(e);
		}
	}
};
</script>

<style>
	.pd10{ padding: 20upx;}
	.mgt10{margin-top: 20upx;}
	.tab{ background: #fff; width: 100%;  border-bottom: 1px solid #eee; height: 100upx; box-sizing: border-box}
.tab .tabli text{font-size:  36upx}
.tab .tabli{ float: left; width: 220upx; text-align: center; line-height: 100upx; height: 100upx;  box-sizing: border-box;}
.tab .tabli.on text{border-bottom: 6upx solid #0081ff; display: inline-block; height: 100%; box-sizing: border-box; }
.banner-class {
	height: 300upx;

	color: #fff !important;
	background-size: 100%;
}

.l-promo-block-v1-content {
	filter: progid: DXImageTransform.Microsoft.gradient(start-colourStr='rgba(76, 76, 97, 0)', end-colourStr='rgba(76, 76, 97, 0.97)');
	z-index: -1;
	/* background: rgba(230, 132, 139, 1); */
	background: #0081ff;
	height: 100%;
}
.banner-class .class_img {
	text-align: center;
	width: 100%;
}
.banner-class .class_img image {
	width: 120upx;
	height: 120upx;
}

.banner-class .ul .li {
	width: 33%;
	float: left;
	text-align: center;
}
.banner-class .ul .li text.num {
	font-size: 60upx;margin-top: 10upx; margin-bottom: 10upx;
}
.banner-class .ul .li .inline text {
	display: inherit;
}
.banner-class .ul .li text {
	display: block;
	line-height: 60upx;
}
.border-none {
	border: none !important;
}

.userMoneyPage .banner-class {
	background: none;
	height: 270upx;
}
.userMoneyPage .ul {
	margin: 0;
}
.userMoneyPage .ul .li {
	height: 200upx;
	width: 100%;
	box-sizing: border-box;
}

.money-list {
	padding-bottom: 30upx;
}
.money-one {
	background-color: #fff;
	padding: 25upx;
	position: relative;
	box-sizing: border-box;
	border-bottom: 1px solid #eee;
}
.moneytext {
	padding-left: 0upx;
	box-sizing: border-box;
}
.green {
	color: #e6848b;
}
.money-list-1 .moneytext {
	padding-left: 80upx;
}
.money-one .moneyico {
	float: left;
}
.money-one .moneyico image {
	width: 50upx;
	height: 50upx;
	margin-top: 5upx;
	border: 1px solid #ccc;
	border-radius: 50%;
}
.moneytext .money-title {
	color: #555;
}
.moneytext .money-title .pull-left {

	padding-right: 120upx;
	box-sizing: border-box;
}
.moneytext .money-title .pull-right {
	position: absolute;
	top: 25upx;
	right: 40upx;
}
.moneytext .text-over-hidden {
	max-width: 98%;
}
.userBank,
.userMoneyPage,
.userWithDraw {
	height: 100%;
	width: 100%;
}

.withdrawBox {
	margin: 20upx;
}
.withdrawBox-1 {
	background-color: #faf9fc;
}
.withdrawBox-1-right {
	padding-left: 160upx;
}
.withdrawBox-2 {
	background-color: #fff;
}
.withdrawBox-2-input .pull-left {
	font-size: 40upx;
	margin-top: 10upx;
}
.withdrawBox-2-input {
	border-bottom: 1px solid #eee;
}
.withdrawBox-3 {
	background-color: #fff;
}
.withdrawBox-2-input input {
	height: 90upx;
	font-size: 40upx;
	box-sizing: border-box;
	display: block;
	padding-left: 20upx;
	padding-bottom: 10upx;
}
.withdrawBox-3 text {
	text-align: center;
	display: block;
}

.bankitem {
	padding: 20upx;
	background-color: #fff;
	position: relative;
}
.bankitem.add {
	padding-bottom: 40upx;
}
.bankitem image {
	position: absolute;
	width: 20upx;
	height: 20upx;
	top: 50upx;
	right: 40upx;
}
.BankBoxItem {
	background: #fff;
	padding: 20upx;
}
.BankBoxItemOne {
	padding: 10upx;
}
.BankBoxItem .input {
	display: block;
	padding-left: 100upx;
}
.buttons {
	padding: 40upx;
}
.pdpig {
	padding-bottom: 20upx;
	padding-top: 30upx;
}
.pdpig .line {
	margin-top: 30upx;
}
.withdrawBox-3 button {
	float: right;
}
.withdrawBox-3 .navigateBack {
	color: #555;
}
.l-promo-block-v1-content {
}
.paylist .li {
	float: left;
	width: 31.6%;
	text-align: center;
	padding: 30rpx 0upx;
	position: relative;
	box-sizing: border-box;
	margin-bottom: 20upx;
	margin-right: 1%;
}
.paylist .li.on {
	background-color: #fff;
}
</style>
